<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="static/assets/global/plugins/jquery-1.11.0.min.js"></script>
	<link rel="stylesheet" type="text/css" href="static/assets/global/plugins/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="static/assets/global/css/components.css">
	<link rel="stylesheet" type="text/css" href="static/assets/admin/pages/css/login.css">
	<title></title>
</head>

<body class="login">
	<div class="content">
		<h3 class="form-title">获取otp信息</h3>
		<div class="form-group">
			<label class="control-label">手机号</label>
			<div>
				<input class="form-control" type="text" placeholder="手机号" name="telephone" id="telephone">
			</div>
		</div>

		<div class="form-actions">
			<button class="btn blue" id="getotp" type="submit">
				获取otp短信
			</button>
		</div>
	</div>
</body>

<script>
	$(document).ready(function() {
		// 绑定otp的click实现用于向后端发送获取手机验证码的请求
		$("#getotp").on("click", function() {
			var telephone = $("#telephone").val();
			if (telephone == null || telephone == "") {
				alert("手机号不能为空");
				return false;
			}
			$.ajax({
				type: "POST",
				contentType: "application/x-www-form-urlencoded",
				url: "http://localhost:8080/user/getotp",
				data: {
					"telephone": $("#telephone").val()
				},
				xhrFields:{
					withCredentials:true
				},
				success: function(data) {
					if (data.status == "success") {
						alert("otp已经发送到了您的手机上，请注意查收");
						window.location.href="file:///Users/leiming/Documents/GitHub/seckill/html/register.html";
					} else {
						alert("otp发送失败，原因为" + data.data.errMsg);
					}
				},
				error: function(data) {
					alert("otp发送失败，原因为" + data.responseText);
				}
			});
			return false;
		});
	});
</script>

</html>